
/**
 * @Method
 * @Author Xincan
 * @Version  1.0
 * @Description  混合器工具类
 * @Return
 * @Date 2019/3/24 11:05
 */

@import "../theme/theme";
@import "../function/function";


/**
 * @Author Xincan
 * @Version  1.0
 * @Description 边框圆角设置
 * @Date 2019/3/13 13:36
 */
@mixin tarot-logo-color(){
  background: -webkit-linear-gradient(0deg, $tarot-header-logo-start-color 0%, $tarot-header-logo-end-color 100%);
  background: -moz-linear-gradient(0deg, $tarot-header-logo-start-color 0%, $tarot-header-logo-end-color 100%);
  background: -o-linear-gradient(0deg, $tarot-header-logo-start-color 0%, $tarot-header-logo-end-color 100%);
  background: -ms-linear-gradient(0deg, $tarot-header-logo-start-color 0%, $tarot-header-logo-end-color 100%);
  background: linear-gradient(90deg, $tarot-header-logo-start-color 0%, $tarot-header-logo-end-color 100%);
}


/**
 * @Author Xincan
 * @Version  1.0
 * @Description 动画效果
 * @Date 2019/3/13 13:36
 */
@mixin tarot-transition($trans){
  -webkit-transition: max-height $trans;
  -moz-transition: max-height $trans;
  -o-transition: max-height $trans;
  -ws-transition: max-height $trans;
  transition: max-height $trans;
}

/**
 * @Author Xincan
 * @Version  1.0
 * @Description 边框圆角设置
 * @Date 2019/3/13 13:36
 */
@mixin box-border-radius($num:4px){
  -webkit-border-radius: $num;
  -o-border-radius: $num;
  -moz-border-radius: $num;
  -ws-border-radius: $num;
  border-radius: $num;
}

/**
 * @Author Xincan
 * @Version  1.0
 * @Description 盒子边框设置
 * @Date 2019/3/13 13:36
 */
@mixin box-border-sizing(){
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ws--box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin element-menu-compatibility() {
  .el-menu {
    width: 100%;
    height: 100%;
    background-color: $tarot-nav-bg-color;
    border: none;
  }
  .el-sub-menu .el-sub-menu__title, .el-menu-item,
  .el-menu-item {
    color: $tarot-nav-font-color;
  }
  .el-sub-menu .el-sub-menu__title:hover,
  .el-menu-item:hover,
  .el-sub-menu__title.is-active,
  .el-menu-item.is-active {
    background-color: $tarot-nav-hover-color;
    color: $tarot-nav-font-color;
  }
}